<!--  -->
<template>
  <div class="leftApp">
    <div class="Consultation">
      <a :href="qq" target="_blank">
        <img src="../assets/img/qq.png" class="original_img" alt />
      </a>
      <p>
        <a :href="qq" target="_blank">qq咨询</a>
      </p>
    </div>
    <div class="Consultation wxConsultation">
      <div class="weixin" v-if="weixin" @mouseleave="wxConsultations()"  style="display:flex">
        <img :src="dataInfo.wechatPic" alt class="weixinChartImg" />
        <!-- <img :src="dataInfo.miniPic" alt class="weixinChartImg" /> -->
      </div>
      <!-- <div class="weixin" v-if="weixin" @mouseleave="wxConsultations()">
        <img :src="dataInfo.miniPic" alt class="weixinChartImg" />
      </div> -->
      <div @mouseleave="wxConsultation()" @mouseenter="wxConsultations()">
        <img src="../assets/img/weixin.png" alt class="original_img" />
        <p>微信咨询</p>
      </div>
    </div>
    <div class="Consultation pHConsultation">
      <div class="phone" v-if="phone" @mouseleave="pHConsultations()">
        <Icon type="ios-call" style="color: #4990cf" />
        {{dataInfo.compangMobile}}
      </div>
      <div @mouseleave="pHConsultation()" @mouseenter="pHConsultations()">
        <img src="../assets/img/phone.png" alt class="original_img" />
        <p>电话咨询</p>
      </div>
    </div>
    <div class="Consultation" @click="buttop">
      <img src="../assets/img/goTop.png" alt class="original_img" />
      <p>回到顶部</p>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  computed: {
    ...mapGetters(["dataInfo"])
  },
  data() {
    //这里存放数据
    return {
      weixin: false,
      phone: false,
      qq: ``
      //  qq:'tencent://message/?uin=111&Site=Sambow&Menu=yes'
    };
  },
  //监听属性 类似于data概念

  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    wxConsultation() {
      this.weixin = false;
    },
    pHConsultation() {
      this.phone = false;
    },
    wxConsultations() {
      this.weixin = true;
    },
    pHConsultations() {
      this.phone = true;
    },
    buttop() {
      this.$emit("buttop", true);
    },
    info() {

      this.qq = `tencent://message/?uin=${this.dataInfo.number}&Site=Sambow&Menu=yes`;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
   
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {
    this.info();
  }, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Consultation {
  width: 0.9rem;
  margin: 0.05rem 0;
  padding: 0.1rem 0;
  cursor: pointer;
  text-align: center;
  background: rgba(254, 254, 254, 1);
  box-shadow: 0px 0px 0.09rem 0px rgba(216, 214, 214, 0.4);
  opacity: 0.8;
  border-radius: 0.04rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(99, 99, 99, 1);
  position: relative;
}
.phone {
  width: 1.6rem;
  display: flex;
  align-items: center;
  padding: 0.1rem 0.05rem;
  border-radius: 5px;
  position: absolute;
  top: 0.2rem;
  right: 1rem;
  opacity: 1;
  color: white;
  background-color: rgb(24, 24, 211);
  opacity: 1;
}
.weixin {
  position: absolute;
  top: -0.3rem;
  right: 1rem;
  opacity: 1;
}
.leftApp {
  font-size: 0.16rem;
}
.original_img {
  width: 0.26rem;
  height: 0.26rem;
}
.weixinChartImg {
  width: 1.5rem;
  height: 1.5rem;
}
$w: 6.25;
@media screen and (max-width: 780px) {
  .Consultation {
    width: 4rem / $w;
    margin: 0.4rem / $w 0;
    padding: 0.7rem / $w 0;
    font-size: 0.8rem / $w;
  }
  .phone {
    padding: 0.7rem / $w 0.3rem / $w;
    top: 1.5rem / $w;
    left: 5rem / $w;
  }
  .weixin {
    position: absolute;
    top: -2rem / $w;
    left: 5rem / $w;
    opacity: 1;
  }
  .leftApp {
    font-size: 1rem / $w;
  }
  .original_img {
    width: 1.8rem / $w;
    height: 1.8rem / $w;
  }
}
</style>